<template>
  <view class="page-container" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
    <tn-nav-bar fixed backgroundColor="tn-main-gradient-orangeyellow">
      账户与安全
      <template slot="right">
        <view class="tn-flex tn-flex-row-center tn-margin-right">
          <tn-button :plain="true" shape="round" class="tn-border tn-border-white tn-color-white"
            @click="handleSave" :loading="isLoading">保存</tn-button>
        </view>
      </template>
    </tn-nav-bar>

    <view class="content-container">
      <!-- 账户 -->
      <view class="input-item">
        <text class="label">账户:</text>
        <view class="input-wrapper">
          <input class="input" type="text" v-model="account" placeholder="请输入账户" />
        </view>
        <text v-if="accountError" class="error-text">{{ accountError }}</text>
      </view>

      <!-- 旧密码 -->
      <view class="input-item">
        <text class="label">旧密码:</text>
        <view class="input-wrapper">
          <input class="input" type="password" v-model="oldPassword" placeholder="请输入旧密码" />
        </view>
        <text v-if="oldPasswordError" class="error-text">{{ oldPasswordError }}</text>
      </view>

      <!-- 新密码 -->
      <view class="input-item">
        <text class="label">新密码:</text>
        <view class="input-wrapper">
          <input class="input" type="password" v-model="newPassword" placeholder="请输入新密码" />
        </view>
        <text v-if="newPasswordError" class="error-text">{{ newPasswordError }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { userAccount } from '@/api/user';
import { mapState } from 'vuex';
export default {
  data() {
    return {
      account: '', // 默认账户，可以从接口获取
      oldPassword: '',
      newPassword: '',
      isLoading: false,
      accountError: '',
      oldPasswordError: '',
      newPasswordError: '',
    };
  },
  mounted() {
    this.account = this.userInfo.account;
  },
  computed: {
    ...mapState(['userInfo']),
  },
  methods: {
    async handleSave() {

      this.isLoading = true;
      if(!this.account){
        this.accountError = '请输入账户';
        return;
      }
      if(!this.oldPassword){
        this.oldPasswordError = '请输入旧密码';
        return;
      }
      try {
        // 调用接口保存密码
        await userAccount({ account: this.account, oldPassword: this.oldPassword, newPassword: this.newPassword });
        uni.showToast({
          title: '保存成功',
          icon: 'success',
        });
        uni.navigateBack();
      } catch (error) {
        console.error('保存失败:', error);
        if (error.code == 4001) {
          this.oldPasswordError = '旧密码错误';
        }
        if (error.code == 4002) {
          this.newPasswordError = '账号已存在,请重新输入';
        }
        this.isLoading = false;
        uni.showToast({
          title: '保存失败，请重试',
          icon: 'none',
        });
      } finally {
        this.isLoading = false;
      }
    },
  },
};
</script>

<style scoped>
.page-container {
  background-color: #ffffff;
}

.content-container {
  margin: 20px 26px 0px 26px;
}

.input-item {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
  padding-bottom: 10px;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  margin-top: 10px;
  font-size: 16px;
  color: #333;
  width: 80px;
  text-align: left;
}

.input-wrapper {
  display: flex;
  flex: 1;
  align-items: center;
}

.input {
  background-color: #F4F4F4;
  height: 40px;
  flex: 1;
  box-sizing: border-box;
  border-radius: 4px;
  font-size: 16px;
}

.error-text {
  color: #ff4d4f;
  font-size: 12px;
  margin-top: 4px;
  padding-left: 12px;
}
</style>